<template>
  <div class="page-dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="30%"
      destroy-on-close
      @close="colseDialog"
    >
      <form-module
        ref="fromRef"
        :formModuletems="dialogFormItems"
        :formConfig="dialogFormConfig"
        v-model="dialogFormData"
      ></form-module>
      <slot></slot>
      <template #footer>
        <span>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "@/store";
import FormModule from "@/components/form-module";
import {
  IFormModuleType,
  IFormConfigType
} from "@/components/form-module/type/type";
import { newPageData, editPageData } from "@/service/main/system/system";

export default defineComponent({
  components: {
    FormModule
  },
  props: {
    dialogFormItems: {
      type: Object as PropType<IFormModuleType>,
      require: true
    },
    title: {
      type: String,
      require: true
    },
    dialogFormConfig: {
      type: Object as PropType<IFormConfigType>,
      default: () => ({})
    },
    defaultInfo: {
      type: Object,
      require: true
    },
    pageName: {
      type: String,
      require: true
    },
    otherInfo: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const store = useStore();
    // 对话框
    const dialogVisible = ref(false);
    const dialogFormData = ref<any>({});
    watch(
      () => props.defaultInfo,
      (newVal) => {
        for (const item of props.dialogFormItems as any) {
          dialogFormData.value[`${item.param}`] = newVal![`${item.param}`];
        }
      },
      {
        deep: true
      }
    );
    /* 提交表单 */
    const fromRef = ref<InstanceType<typeof FormModule>>();
    // 刷新表格
    const updateTabl = () => {
      store.dispatch("system/getPageListAction", {
        pageName: props.pageName,
        queryInfo: {
          offset: 0,
          size: 10
        }
      });
      ElMessage({
        message: "操作成功！",
        type: "success"
      });
    };
    // 提交
    const submitForm = () => {
      fromRef.value?.elFormRef?.validate((valid) => {
        if (!valid) return;
        // 编辑
        if (Object.keys(props.defaultInfo as any).length) {
          editPageData(`/${props.pageName}/${props.defaultInfo?.id}`, {
            ...dialogFormData.value,
            ...props.otherInfo
          });
          updateTabl();
        } else {
          // 新建
          newPageData(`/${props.pageName}`, {
            ...dialogFormData.value,
            ...props.otherInfo
          });
          updateTabl();
        }
        dialogVisible.value = false;
      });
    };
    // 对话框关闭
    const colseDialog = () => {
      fromRef.value?.elFormRef?.resetFields();
    };
    return { dialogVisible, dialogFormData, submitForm, fromRef, colseDialog };
  }
});
</script>

<style scoped></style>
